@import "../components.scss";
$u-action-sheet-reset-button-width:100% !default;
$u-action-sheet-title-font-size: 16px !default;
$u-action-sheet-title-padding: 12px 30px !default;
$u-action-sheet-title-color: $u-main-color !default;
$u-action-sheet-header-icon-wrap-right:15px !default;
$u-action-sheet-header-icon-wrap-top:15px !default;
$u-action-sheet-description-font-size:13px !default;
$u-action-sheet-description-color:14px !default;
$u-action-sheet-description-margin: 18px 15px !default;
$u-action-sheet-item-wrap-item-padding:15px !default;
$u-action-sheet-item-wrap-name-font-size:16px !default;
$u-action-sheet-item-wrap-subname-font-size:13px !default;
$u-action-sheet-item-wrap-subname-color: #c0c4cc !default;
$u-action-sheet-item-wrap-subname-margin-top:10px !default;
$u-action-sheet-cancel-text-font-size:16px !default;
$u-action-sheet-cancel-text-color:$u-content-color !default;
$u-action-sheet-cancel-text-font-size:15px !default;
$u-action-sheet-cancel-text-hover-background-color:rgb(242, 243, 245) !default;

.u-reset-button {
	width: $u-action-sheet-reset-button-width;
}

.u-action-sheet {
	text-align: center;

	&__header {
		position: relative;
		padding: $u-action-sheet-title-padding;

		&__title {
			font-size: $u-action-sheet-title-font-size;
			color: $u-action-sheet-title-color;
			font-weight: bold;
			text-align: center;
		}

		&__icon-wrap {
			position: absolute;
			right: $u-action-sheet-header-icon-wrap-right;
			top: $u-action-sheet-header-icon-wrap-top;
		}
	}

	&__description {
		font-size: $u-action-sheet-description-font-size;
		color: $u-tips-color;
		margin: $u-action-sheet-description-margin;
		text-align: center;
	}

	&__item-wrap {

		&__item {
			padding: $u-action-sheet-item-wrap-item-padding;
			@include flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			&__name {
				font-size: $u-action-sheet-item-wrap-name-font-size;
				color: $u-main-color;
				text-align: center;
			}

			&__subname {
				font-size: $u-action-sheet-item-wrap-subname-font-size;
				color: $u-action-sheet-item-wrap-subname-color;
				margin-top: $u-action-sheet-item-wrap-subname-margin-top;
				text-align: center;
			}
		}
	}

	&__cancel-text {
		font-size: $u-action-sheet-cancel-text-font-size;
		color: $u-action-sheet-cancel-text-color;
		text-align: center;
		padding: $u-action-sheet-cancel-text-font-size;
	}

	&--hover {
		background-color: $u-action-sheet-cancel-text-hover-background-color;
	}
}
